<script setup lang="ts">
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import vHeader from '../components/HeaderComponent.vue';
import vSidebar from '../components/SidebarComponent.vue';
import ROUTER_CONSTANTS from '../route/constants';
import useStore from '../store/modules/User';

// 全局路由
const router = useRouter();
// User store
const userStore = useStore();

// 第一次进入页面，判断用户是否已经登录，如果未登录则跳转到登录页面
onMounted(() => {
  if (!userStore.isLogin()) {
    router.replace({
      name: ROUTER_CONSTANTS.LOGIN,
    });
  }
});
</script>

<template>
  <div class="about">
    <v-header />
    <v-sidebar />
    <div class="content-box">
      <div class="content">
        <router-view v-slot="{ Component }">
          <transition name="move" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </div>
    </div>
  </div>
</template>

<style scope>
.content-box {
  position: absolute;
  left: 250px;
  right: 0;
  top: 70px;
  bottom: 0;
  padding-bottom: 30px;
  -webkit-transition: left 0.3s ease-in-out;
  transition: left 0.3s ease-in-out;
  background: #f0f0f0;
}

.content {
  width: auto;
  height: 100%;
  padding: 10px;
  overflow-y: scroll;
  box-sizing: border-box;
}

.container {
  padding: 30px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>
